<template>
  <div class="subject-wrapper">
    <el-card class="top-card">
      <el-form
        ref="formInline"
        :inline="true"
        :model="formInline"
        :rules="rules"
      >
        <!-- 手机号 -->
        <el-form-item label="学科编号" class="short-input" prop="rid">
          <el-input v-model="formInline.rid"></el-input>
        </el-form-item>
        <el-form-item label="学科名称" class="normal-input" prop="name">
          <el-input v-model="formInline.name"></el-input>
        </el-form-item>
        <el-form-item label="创建者" class="short-input" prop="username">
          <el-input v-model="formInline.username"></el-input>
        </el-form-item>
        <el-form-item label="状态" class="normal-input" prop="status">
          <el-select v-model="formInline.status" placeholder="活动区域">
            <el-option label="所有" value=""></el-option>
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSubject">查询</el-button>
          <el-button @click="resetList">清除</el-button>
          <el-button icon="el-icon-plus" type="primary" @click="showSubjectAdd"
            >新增学科</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <!-- 表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" width="50" type="index">
        </el-table-column>
        <el-table-column prop="rid" label="学科编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="学科名称"> </el-table-column>
        <el-table-column prop="short_name" label="简称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="create_time" label="创建日期"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status">启用</span>
            <span v-else style="color:red">禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              type="text"
              >编辑</el-button
            >
            <el-button @click="toggleStatus(scope.row)" type="text">{{
              scope.row.status ? '禁用' : '启用'
            }}</el-button>
            <el-button @click="delSubject(scope.row)" type="text"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[2, 4, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      >
      </el-pagination>
    </el-card>
    <subjectAdd ref="subjectAdd" />
    <!-- 编辑话框 -->
    <subjectEdit ref="subjectEdit" />
  </div>
</template>

<script>
import { subjectList, subjectStatus, subjectRemove } from '@/api/subject.js'
import subjectAdd from './components/subjectAdd'
import subjectEdit from './components/subjectEdit'

export default {
  name: 'subject',
  components: {
    subjectAdd,
    subjectEdit
  },
  data () {
    return {
      formInline: {
        name: '',
        rid: '',
        status: '',
        username: ''
      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      pageNo: 1,
      pageSize: 5,
      totalNum: 50,
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        rid: [{ required: true, message: '不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '不能为空', trigger: 'blur' }],
        username: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.querySubjectList()
  },
  methods: {
    resetList () {
      this.$refs.formInline.resetFields()
      this.pageNo = 1
      this.querySubjectList()
    },
    searchSubject () {
      this.pageNo = 1
      this.querySubjectList()
    },
    querySubjectList () {
      subjectList({
        page: this.pageNo,
        limit: this.pageSize,
        ...this.formInline
      }).then(data => {
        this.tableData = data.data.items
        this.totalNum = data.data.pagination.total
      })
    },
    showSubjectAdd () {
      this.$refs['subjectAdd'].visible = true
    },
    toggleStatus (row) {
      subjectStatus({
        id: row.id
      }).then(data => {
        if (data.code === 200) {
          this.$message.success('状态修改成功')
          row.status = !row.status
        }
      })
    },
    // 页容量变化时
    handleSizeChange (val) {
      this.pageNo = 1
      this.pageSize = val
      this.querySubjectList()
    },
    // 页码改变
    handleCurrentChange (val) {
      this.pageNo = val
      this.querySubjectList()
    },
    // 删除学科
    delSubject (row) {
      subjectRemove({
        id: row.id
      }).then(res => {
        console.log(res)
        this.$message.success('删除成功')
        // 如果是最后一页，没有数据，页码-1
        if (this.tableData.length === 1) {
          if (this.pageNo > 1) {
            this.pageNo--
          }
        }
        this.querySubjectList()
      })
    },
    // 编辑学科
    handleEdit (index, row) {
      this.$refs['subjectEdit'].visible = true
      if (!this.$refs['subjectEdit'].form.id) {
        this.$refs['subjectEdit'].form = Object.assign({}, row)
      }
    }
  }
}
</script>

<style lang="less">
.short-input {
  .el-form-item__content {
    width: 100px;
  }
}
.normal-input {
  .el-form-item__content {
    width: 150px;
  }
}

.el-pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.top-card {
  margin-bottom: 19px;
}
</style>
